<template>
    <div class="travel-map">
        <div id="main"></div>
    </div>
</template>
<script>
import geoJson from '@/assets/data.json'
import {travel} from '@/api/api'
import map from '@/utils/map'
import echarts from 'echarts'
import { onMounted } from 'vue'
export default {
    setup(){
        const drawMap = function(points,linesData){
        let myChart = echarts.init(document.getElementById('main'))
        echarts.registerMap('china',geoJson)

        let pointsObj = {
            type:'effectScatter', //散点
                coordinateSystem:'geo',
                showEffectOn:'render',
                symbolSize:10,
                zlevel:1,
                data:points,
                rippleEffect:{
                    period:15,
                    scale:4,
                    brushType:'fill'
                }    
        }
        let linesObj = {
                    type:'lines',
                    zlevel:2,
                    effect:{
                        show:true,
                        period:4,
                        symbol:'arrow',
                        symbolSize:7,
                        trailLength:0.4
                    },
                    lineStyle:{
                        normal:{
                            color:'#1DE9B6',
                            width:1,
                            opacity:0.1,
                            curveness:0.3
                        }
                    },
                    data:linesData
        }
        map.series[1] = pointsObj
        map.series[2] = linesObj
        let option = map
        myChart.setOption(option)
        }
        onMounted(
            travel().then(res=>{
            if(res.data.status === 200){
                let {points,linesData} = res.data.data
                // console.log(linesData);
                drawMap(points,linesData)
            }
        })
        )
    },
}
</script>
<style lang="less">
.travel-map{
    width: 100%;
    #main{
        width: 100%;
        height: 600px;
    }
}
</style>